<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
	
	<meta name="format-detection" content="telphone=no,email=no"/>
	<link rel="stylesheet" href="css/global.css">
	<title>picker</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header class="header">
    <div class="header-left"><i class="header-icon icon-v-left js-back"></i></div>
    <h1 class="page-tt">picker</h1>
</header>
<main id="pages" class="page-wrap">
    <div class="page">    
        <article class="article">
            <p class="btn-outline full-width js-picker-btn">picker</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis nulla, ea ex quas ut pariatur totam hic ducimus nostrum, repudiandae. Id ea asperiores commodi sapiente perspiciatis, obcaecati sint natus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo minima corporis nesciunt similique eum tenetur, a error odit dicta! Quos atque odit quibusdam in deserunt sed temporibus officiis vel sit.</p>
            <p>Sit rem reiciendis, nobis, id consequatur saepe quam excepturi non commodi cum omnis velit iusto et dolores totam consequuntur, nisi quisquam cumque maiores tempora labore incidunt? Ex odit sapiente nam!</p>
            <p>Nesciunt quibusdam, vitae perferendis veritatis iste eos explicabo perspiciatis molestias quaerat ipsum nobis id neque quas, similique minima architecto illo voluptates, ipsam reiciendis vero magni odio sit. Animi, voluptates, nesciunt!</p>
            <p>Possimus ad fuga perspiciatis officia nobis distinctio facere suscipit quia, id. Officia dolorem deserunt ex commodi, non quaerat et aliquid eaque, facere reiciendis, a numquam maxime! In officiis eveniet omnis?</p>
            <p>Laudantium magnam molestias saepe velit odit dolore, soluta reprehenderit placeat. Natus omnis debitis aperiam ea sit nostrum aut culpa veniam, repudiandae sint officia et adipisci sed laborum tempora ad. Non.</p>
        </article> 
    </div>
    <!-- <div class="page">
        <div class="content">
            <div class="picker">
                <ul class="select-list">
                    <li>上海</li>
                    <li>北京</li>
                    <li class="active">深圳</li>
                    <li>广州</li>
                    <li>杭州</li>
                </ul>
                <div class="select-mask"></div>
            </div>
            <h3 class="guide-title">多个组合，默认每个宽度为50%，如大于2个，请重新控制每个的宽度</h2>
            <div class="picker-group">
                <div class="picker">
                    <ul class="select-list">
                        <li>7月</li>
                        <li>8月</li>
                        <li class="active">9月</li>
                        <li>10月</li>
                        <li>11月</li>
                        <li>12月</li>
                    </ul>
                    <div class="select-mask"></div>
                </div>
                <div class="picker">
                    <ul class="select-list">
                        <li>5日</li>
                        <li>6日</li>
                        <li class="active">7日</li>
                        <li>8日</li>
                        <li>9日</li>
                    </ul>
                    <div class="select-mask"></div>
                </div>
            </div>
        </div>
    </div> -->
</main>
<section class="panel-wrap">
    <div class="overlay"></div>
    <section class="bottom-panel panel--picker">
        <div class="panel-hd">
            <span class="hd-btn btn-cancel">取消</span>
            <span class="hd-btn btn-ok">完成</span>
        </div>
        <div class="picker-list">
            <div class="picker-item">
                <ul class="select-list">
                    <li>7月</li>
                    <li>8月</li>
                    <li class="active">9月</li>
                    <li>10月</li>
                    <li>11月</li>
                    <li>12月</li>
                </ul>
                <div class="picker-mask"></div>
            </div>
            <div class="picker-item">
                <ul class="select-list">
                    <li>5日</li>
                    <li>6日</li>
                    <li class="active">7日</li>
                    <li>8日</li>
                    <li>9日</li>
                </ul>
                <div class="picker-mask"></div>
            </div>
        </div>
    </section>
</section>
</body>
</html>